<template>
    <div id="detail">
        <detail-nav-bar class="detail-nav" ref="nav" @titleClick="titleClick"></detail-nav-bar>
        <scroll class="content" ref="scroll" :probe-type="3" @scroll="contentScroll">
            <detail-swiper v-if="topImages!=''" :topImages = "topImages" @imageLoad="imageLoad" />
            <detail-base-info :goods="baseData" />
            <detail-descript-info :descript="descript" ref="desc" />
            <detail-param-info :paramInfo="params" ref="params" />
            <detail-comment-info :commentInfo="comments" ref="comments" />
        </scroll>
        <detail-bottom-bar  @addToCart="addToCart" @chat="chatClick"/>
        <back-top @click.native="backClick" v-show="isShowBackTop" />
    </div>
</template>

<script>
import DetailNavBar from './childComps/DetailNavBar'
import DetailBottomBar from './childComps/DetailBottomBar'
import Scroll from 'components/common/scroll/Scroll'
import DetailSwiper from './childComps/DetailSwiper'
import DetailBaseInfo from './childComps/DetailBaseInfo'
import DetailDescriptInfo from './childComps/DetailDescriptInfo'
import DetailParamInfo from './childComps/DetailParamInfo'
import DetailCommentInfo from './childComps/DetailCommentInfo'

import {backTopMixin} from 'common/mixin.js'
import {getDetail, Goods, Descript} from 'network/detail.js'
import {addCar} from 'network/shopcar.js'
import {debounce} from 'common/utils'
export default {
    name: "Detail",
    data() {
        return {
            iid: '',
            topImages: [],
            baseData: {},
            descript: {},
            params: [],
            comments:[],
            themeTopYs: [],
            getThemeTopYs: null,
            currIndex: 0,
        }
    },
    components: {
        DetailNavBar,
        DetailBottomBar,
        Scroll,
        DetailSwiper,
        DetailBaseInfo,
        DetailDescriptInfo,
        DetailParamInfo,
        DetailCommentInfo,
    },
    mixins: [backTopMixin],
    created() {
        this.iid = this.$route.params.id;
        this._getDetail(this.iid);
        this.getThemeTopYs = debounce(() => {
            this.themeTopYs = []
            this.themeTopYs.push(0);
            this.themeTopYs.push(this.$refs.desc.$el.offsetTop);
            this.themeTopYs.push(this.$refs.params.$el.offsetTop);
            this.themeTopYs.push(this.$refs.comments.$el.offsetTop);
            this.themeTopYs.push(Number.MAX_VALUE);
        })
    },
    mounted() {
        // 图片加载完的事件监听
        const refresh = debounce(this.$refs.scroll.refresh,500)
            this.$bus.$on('detailItemImageLoad',()=>{
            refresh();
        });
    },
    methods: {
        //添加购物车
        _addCar(userName, iid) {
            addCar(userName, iid).then((res) => {
                console.info(res);
                if(res.code === 1) {
                    this.$toast.show(res.data,2000);
                }else{
                    this.$toast.show("尼玛系统又出bug了",2000);
                }
            })
        },
        // 点击导航栏进行跳转
        titleClick(index) {
            this.$refs.scroll.scrollTo(0,-this.themeTopYs[index],500)

        },
        // 图片加载完就刷新重新计算高度
        imageLoad() {
            this.$refs.scroll.refresh();
            this.getThemeTopYs();
        },
        // 获取详情数据
        _getDetail(iid) {
            getDetail(iid).then((res) => {
                console.info(res);
                // 顶部轮播图
                this.topImages = res.data.topImages;
                // 基本数据
                this.baseData = new Goods(res.data.baseData);
                // 描述部分信息
                this.descript = new Descript(res.data.scenic,res.data.history);
                //参数
                this.params = res.data.params;
                //评论
                this.comments=res.data.comments;
            })
        },
        // 监听scroll滚动的位置
        contentScroll(position) {
            this.listenShowBackTop(position);
            for(let i=0;i<this.themeTopYs.length-1; i++) {
                if(this.currIndex !==i && -position.y >= this.themeTopYs[i] && -position.y < this.themeTopYs[i+1]) {
                    this.currIndex = i;
                    this.$refs.nav.currIndex = this.currIndex;
                }
            }
        },
        addToCart() {
            if(this.$store.state.user.length == 0) {
                this.$toast.show("添加失败，请先登录",5000);
                this.$router.push('/profile/login')
            }else{
                this._addCar(this.$store.state.user[0].username, this.iid);
            }
        },
        chatClick() {
            this.$router.push('/detail/'+this.iid+'/chat')
        }
    },
}
</script>

<style scoped>
    #detail {
        position: relative;
        z-index: 9;
        background-color: #fff;
        height: 100vh;
    }

    .detail-nav {
        position: relative;
        z-index: 9;
        background-color:#fff;
    }

    .content {
        /* height: calc(100% - 44px); */
        position: absolute;
        top: 44px;
        bottom: 60px;
    }
    
</style>